<template>
	<!-- 相关订单 -->
	<view class="content display  width_750 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" ></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">相关订单</text>
			</template>
		</u-navbar>
		<view class="fn_content display  width_750 displayColumn all_item">
			<template v-for="(item,index) in arr1" >
				<!-- 列表 -->
				<view class="fn_card display displaycenter_aliem  width_699 M-T20 " :key="index">
					<!-- 右边 -->
					<view class="fn_card_right display   displayColumn M-L16">
						<view class="fn_card_img_txt display  width-100  ">
							<view class="fn_card_img_txt_right  displayColumn display M-L16">
								<view class="fnjs_ione display  displaycenter_aliem width-100">
									<span class="fontSize font_comm fn_tt2" style="margin-top: 16rpx;">{{item.goodsName}}</span>
									<!-- <span class="fontSize font_comm fn_tt1  " style="font-size: 24rpx;">摩卡兄弟（铁道大学站）</span> -->
									<view class="fn_three display  fontSize font_comm ">
										<span class="fn_tt4 M-L8">￥</span>
										<span class="fn_tt5">{{item.payCash}}</span>
									</view>
								</view>
									<!-- <span class="fontSize font_comm fn_tt2" style="margin-top: 16rpx;">套餐A</span> -->
								<view class="fn_three display  fontSize font_comm M-T16">
									<span class="fn_tt3">充值时间：{{item.createTime}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import list from '../../uni_modules/uview-ui/libs/config/props/list';
	export default {
		data() {
			return {
				arr:[],
				arr1:[],
				ids:''
			}
		},
		onLoad(options) {
			if(uni.$u.test.isEmpty(options.arr1)){
				this.ids = options.payOrderIds
			}else{
				this.arr = JSON.parse(options.arr1);
			}
			console.log(this.arr);
			// 请求接口
			this.getList();
		},
		methods: {
			getList(){
				this.$modal.loading('正在加载')
				let list = [];
				this.arr.forEach(item=>{
					list.push(item.id);
				})
				list = list.join(',');
				let data = {
						payLogIds:list||this.ids
				}
				console.log(data)
				this.$req.get('/xcx/userPayLog/list/ids',data).then(res=>{
					if(res.data.code==200){
						setTimeout(()=>{
							this.$modal.closeLoading();
							this.arr1 = res.data.data;
						},500)
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.fn_card {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_card_right_title {
		justify-content: flex-start;
	}
	.fn_card_img_txt_right {
		align-items: flex-start;
		justify-content: flex-start;
	}
	.fn_card_right_title {
		justify-content: flex-start;
	}
	.fn_card_img_txt_right {
		align-items: flex-start;
		justify-content: flex-start;
	}
	.fn_card1{
		width: 690rpx;
		// height: 250rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_card1_one{
		justify-content: space-between;
	}
	.fn_wodeline{
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
		margin-left: 24rpx;
	}
	.fn_card1_two{
		justify-content: space-between;
	}
	.bottom_btn{
		justify-content: space-between;
	}
	.fn_time{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_zidong{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_money{
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_paio{
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
	}
	.fn_btns1{
		width: 152rpx;
		height: 62rpx;
		background: rgba(18,107,201,0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid;
		border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}
	.fn_card2{
		// height: 214rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_gongsi{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_name{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_address{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_card2_two{
		justify-content: space-between;
	}
	.fn_card2_one{
		justify-content: flex-start;
	}
	.fn_card2_two_left{
		align-items: flex-start;
	}
	.fnjs_ione{
		width:550rpx;
		justify-content: space-between;
	}
	.fn_xx1_txt{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_xx1_txt1{
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}
	.fn_xx1_time{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_xx1_name{
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_card1_one1{
		margin-top: 24rpx;
		width: 690rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_title {
		font-weight: 600;
		font-size: 24rpx;
		color: #212121;
	}
	.fn_image {
		width: 132rpx;
		height: 132rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.fn_tt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_tt3 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_tt4 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_tt5 {
		font-weight: 600;
		font-size: 40rpx;
		color: #FF672D;
	}
	.fn_tt2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
</style>
